<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/swiper-bundle.css">
    <link rel="stylesheet" href="./css/shouye.css">
</head>

<body>
    <div class="all">
        <div class="header main">
            <div>
                <a href="">
                    <img src="./img/11.jpg" alt="">
                </a>
            </div>
            <div class="header-search">
                <input type="text" class="header_ipt">
                <button type="submit" class="header_search">搜索</button>
                <ul class="hot_word">
                    <li><a href="" target="_blank">保湿</a><s class="line"></s></li>
                    <li><a target="_blank" href="">面膜</a><s class="line"></s></li>
                    <li><a target="_blank" href="">洗面奶</a><s class="line"></s></li>
                    <li><a target="_blank" href="">补水</a><s class="line"></s></li>
                    <li><a target="_blank" href="">香水</a><s class="line"></s></li>
                    <li><a target="_blank" href="">眼霜</a><s class="line"></s></li>
                    <li><a target="_blank" href="">口红</a><s class="line"></s></li>
                    <li><a target="_blank" href="">护肤</a><s class="line"></s></li>
                    <li><a target="_blank" href="">BB霜</a></li>
                </ul>
            </div>
            <div class="header_cart">
                <button>去购物车结算</button>
            </div>
        </div>

        <div class="list">
            <ul class="nav main" id="list_tillte">
                <li role="presentation" class="dropdown" id="active">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        首页
                    </a>
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        激素免税店
                    </a>
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        母婴特卖
                    </a>
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        美妆商城<span class="caret"></span>
                    </a>
                </li>
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        母婴特卖
                    </a>
            </ul>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/01.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/02.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/03.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/04.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/08.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>

        <div class="floor_must_see_1">
            <div class="floor_must_see">

            </div>
        </div>
        <div class="new_shop main">

        </div>
        <div class="content">
            <div class="today_new_pro main">
                <ul class="today_new_ul">

                </ul>
            </div>
        </div>
        <div class="footer">
            <div class="contain main">
                <a href="" class="footer_link">
                    <span class="one"></span>
                    <span class="con">
                        <b>值得信赖美妆电商</b>
                    </span>
                    <p>四千万用户信赖</p>
                </a>
                <a href="" class="footer_link">
                    <span class="two"></span>
                    <span class="con">
                        <b>成功在美上市</b>
                    </span>
                    <p>股票代码NYSE:JMEI</p>
                </a>
                <a href="" class="footer_link">
                    <span class="three"></span>
                    <span class="con">
                        <b>品牌防伪码</b>
                    </span>
                    <p>支持品牌官网验真</p>
                </a>
                <a href="" class="footer_link">
                    <span class="four"></span>
                    <span class="con">
                        <b>百万用户口碑</b>
                    </span>
                    <p>帮你只选对的,不选贵的</p>
                </a>
                <a href="" class="footer_link">
                    <span class="five"></span>
                    <span class="con">
                        <b>订单闪电发货</b>
                    </span>
                    <p>1.5小时订单急速出库</p>
                </a>
                <a href="" class="footer_link">
                    <span class="six"></span>
                    <span class="con">
                        <b>大牌明星热荐</b>
                    </span>
                    <p>打造精致明星脸</p>
                </a>
            </div>
        </div>
        <!-- <div class="base"> -->
        <div class="footer_con main">
            <ul class="linksa">
                <li class="links">服务保障</li>
                <li><a href="" target="_blank" rel="nofollow">品牌真品防伪码</a></li>
                <li><a href="">专属客服服务</a>
                </li>
                <li><span class="footer_zcemail">总裁邮箱ceo@jumei.com</span></li>
            </ul>
            <ul class="linksb">
                <li class="links">使用帮助</li>
                <li><a href="" target="_blank" rel="nofollow">新手指南</a></li>
                <li><a href="" target="_blank" rel="nofollow">常见问题</a></li>
                <li><a href="" target="_blank" rel="nofollow">帮助中心</a></li>
                <li><a href="" target="_blank" rel="nofollow">用户协议</a></li>
                <li><a href="" target="_blank" rel="nofollow">公示制度</a></li>
                <li><a href="" target="_blank" rel="nofollow">聚美隐私权政策</a>
                </li>
                <li><a href="" target="_blank" rel="nofollow">个人信息管理规则</a>
                </li>
                <li><a href="" target="_blank" rel="nofollow">意见反馈及投诉举报规则</a></li>
                <li><a href="" target="_blank" rel="nofollow">知识产权维权处理规则</a></li>
                <li><a href="" target="_blank" rel="nofollow">评价管理规则</a></li>
            </ul>
            <ul class="linksc">
                <li class="links">支付方式</li>
                <li><a href="" target="_blank" rel="nofollow">货到付款</a></li>
                <li><a href="" target="_blank" rel="nofollow">在线支付</a></li>
                <li><a href="" target="_blank" rel="nofollow">余额支付</a></li>
                <li><a href="" target="_blank" rel="nofollow">现金券支付</a></li>
            </ul>

            <ul class="linksd">
                <li class="links">配送方式</li>
                <li><a href="" target="_blank" rel="nofollow">包邮政策</a></li>
                <li><a href="" target="_blank" rel="nofollow">配送说明</a></li>
                <li><a href="" target="_blank" rel="nofollow">运费说明</a>
                </li>
                <li><a href="" target="_blank" rel="nofollow">验货签收</a>
                </li>
            </ul>

            <ul class="linkse">
                <li class="links">售后服务</li>
                <li><a href="" target="_blank" rel="nofollow">正品承诺</a></li>
                <li><a href="" target="_blank" rel="nofollow">售后咨询</a></li>
                <li><a href="s" target="_blank" rel="nofollow">退货政策</a></li>
                <li><a href="e" target="_blank" rel="nofollow">退货办理</a></li>
            </ul>
            <div class="links_er_box">
                <ul class="linksf">
                    <li class="links">手机聚美</li>
                    <li><span class="link_bottom_pic"></span></li>
                    <li>下载移动客户端</li>
                </ul>
                <ul class="linksg">
                    <li class="links">聚美微信</li>
                    <li><span class="link_bottom_pic"></span></li>
                    <li>聚美官方微信</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="play_box">

    </div>
    <div class="footer_center">
        <div class="footer_center_link main">
            <a href="">关于聚美优品</a>
            <a href="">INVESTOR RELATIONS</a>
            <a href="">合作招商</a>
            <a href="">获取更新</a>
            <a href="">加入聚美</a>
            <a href="">品牌合作专区</a>
            <a href="">媒体报道</a>
            <a href="">商务合作</a>
        </div>
    </div>
    <div class="footer_copyright">
        <div class="footer_copyright_link main">
            <p class="footer_copy_con">
                COPYRIGHT © 2010-2019 北京创锐文化传媒有限公司 JUMEI.COM 保留一切权利。
                客服热线：400-011-0888
                <br>
                京公网安备 11010102001226
                | <a href="" target="_blank" rel="nofollow">京ICP证111033号</a>
                | <a href="">食品经营许可证</a>
                | <a href="" target="_blank" rel="nofollow">营业执照</a>
                | <a href="" target="_blank" rel="nofollow">ICP许可证</a>
                | <a href="" target="_blank" rel="nofollow">出版物经营许可证</a>
                | <a href="" target="_blank" rel="nofollow">第二类医疗器械经营备案凭证</a>
                | <a href="" target="_blank" rel="nofollow">网络食品交易第三方平台提供者备案信息表</a>
                | <a href="" target="_blank" rel="nofollow">增值电信业务经营许可证</a>
            </p>
            <p>
                <a href="javascript:void(0)" class="footer_copy_logo logo01" rel="nofollow"></a>
                <a href="" target="_blank" class="footer_copy_logo logo02" rel="nofollow"></a>
                <a href="javascript:void(0)" class="footer_copy_logo logo03" rel="nofollow"></a>
                <a href="javascript:void(0)" class="footer_copy_logo logo04" rel="nofollow"></a>
                <a href="" target="_blank" class="footer_copy_logo logo05" rel="nofollow"></a>
                <a href="" class="footer_logo6" rel="nofollow"></a>
            </p>
        </div>
    </div>
    <div class="frame">
        <div class="fram_panel">
            <ul class="fram_panel_ul">
                <li class="fpbtn">
                    <a href="./login.html">
                        <s></s>
                    </a>

                </li>
                <li class="fpcart">
                    <a href="#">
                        <s></s>
                        <span class="fpspan">购物车</span>
                    </a>

                </li>
                <li class="fpasset">
                    <a href="#">
                        <s></s>

                    </a>
                </li>
                <li class="fpfave">
                    <a href="#">
                        <s></s>
                    </a>
                </li>
                <li class="fphistory">
                    <a href="#">
                        <s></s>
                    </a>
                </li>
                <li class="fpqrcode">
                    <a href="#">
                        <s></s>
                    </a>
                </li>
                <li class="fp_support">
                    <a href="#">
                        <s></s>
                    </a>
                </li>
                <li class="fp_tooltip">
                    <a href="#">
                        <s></s>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    </div>

    <script src="./js/swiper-bundle.js"></script>
    <script src="./js/shouye.js"></script>
    <script src="./js/ajax.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            //   direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })

        ajax({
            url: "http://localhost/6week/jumei/php/jumeiGood.php",
            type: 'post',
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                var goodList = res
                let str = ''
                goodList.forEach((item,index) => {
                    str += `<li class="newLi">
                        <div class="img_box">
                            <img src="${item.image}" alt="">
                            <span>${item.good_name}</span>
                            <p>￥${item.price}</p>
                            <a href="./details.html?id=${item.id}" class="add_details">查看详情</a>
                        </div>
                        <div class="commit_new" style="display:block;">
                            <div class="commit_new_box">海外直采 海外价格 闪电发货</div>
                        </div>
                        <div class="deals_tags">
                            <span class="tags_list tags_haitao"></span>
                        </div>
                        <div class="add_cart_box">
                            <a href="javascript:;" class="add_cart" style="display:block;">加入购物车</a>
                        </div>
                    </li>`
                    document.querySelector('.today_new_ul').innerHTML = str
                    const newLi = document.querySelectorAll('.newLi')[index]
                    console.log(newLi);
                    const commit_new = document.querySelector('.commit_new')
                    const add_cart = document.querySelector('.add_cart')
                    newLi.onmouseenter = function () {
                        commit_new.style.display = 'block'
                        add_cart.style.display = 'block'
                    }
                    newLi.onmouseleave = function () {
                        commit_new.style.display = 'none'
                        add_cart.style.display = 'none'
                    }
                });

            }
        })


    </script>
</body>

</html>